<template>
    <div id="echarts" style="height: 50vh;width: 100%;"></div>
</template>

<script>
  //全部引入
  import { mapGetters } from 'vuex'
  import { graphicData } from '@/api/bug'

  let echarts = require('echarts')
  export default {
    name: 'histogram',
    data(){
      return{
        xdata: ['新建','分配','打开','已解决','关闭','重新打开','拒绝'],  //图形x轴的值
        numberData: [5, 20, 36, 10, 10, 20 , 70]                         //图形的数据（各个数量）
      }
    },
    computed:{
      ...mapGetters(['projectId'])
    },
    mounted() {
      this.getData();
    },
    methods: {
      //从后台获取数据
      getData(){
        graphicData({id:this.projectId}).then(res =>{
          this.numberData = res.data
          this.initCharts();
        })
      },
      initCharts() {
        this.chart = echarts.init(this.$el);
        this.setOptions();
      },
      setOptions() {
        this.chart.setOption({
          title: {
            text: '缺陷数据图'
          },
          tooltip: {},
          xAxis: {
            data: this.xdata
          },
          visualMap: {
            show: false,
            min: 0,
            max: 50,
            dimension: 0,
            inRange: {
              color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
            }
          },
          yAxis: {},
          series: [{
            name: '数量',
            type: 'bar',
            data: this.numberData
          }]
        })
      }
    }
  }
</script>

<style scoped>

</style>
